<template>
	<div>
		<div class="selectBox">
	      <div>
	        <el-form ref="paramform" :model="searchData" size="mini"  inline>
	          <el-form-item label v-for="(item,index) in selectObj.slice(0,3)" :key="index">
	          	<!-- 根据需要显示的输入框类型进行动态显示 -->
	            <el-input :placeholder="item.name" @input="searchData[item.modelName] = verifyfilter(item.verifyTpye, searchData[item.modelName])"  v-if="item.type =='inputVerify'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
	            <el-input :placeholder="item.name"  v-if="item.type =='input'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
	            <el-select :placeholder="item.name" v-if="item.type =='select'" v-model="searchData[item.modelName]"  clearable filterable style="width:150px"  @keyup.enter.native="searchHandler">
	              <el-option v-for="opt in item.selectData" :key="opt.dictValue" :label="opt.dictLabel" :value="opt.dictValue"></el-option>
	            </el-select>
	          </el-form-item>  
	          <el-form-item>
				  <el-button @click="showOrHidden = !showOrHidden" size="mini" v-if="selectObj.length>3">高级查询<i class="el-icon-caret-bottom"></i></el-button>

				  <el-button type="primary" icon="el-icon-search" @click="searchHandler" ref="searchDom">查询</el-button>
	          </el-form-item>
	        </el-form>
	      </div>
	      <div>
	        <!-- 新增按钮 -->
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="addFunc" v-hasPermi="['metaDataManagement:mtport:insert']"
				>新建</el-button>
	        <!-- 审核按钮 -->
	        <el-button  v-if="isShowAud" size="mini" type="primary" icon="el-icon-s-check" @click="auditFunc">审核</el-button>
			    <!-- 油价协力费率关系按钮 -->
            <el-tooltip class="item" effect="dark" content="油价协力费率关系" placement="top" v-if="isShowOilPrice">
	            <el-button size="mini" icon="el-icon-coin" @click="oilPriceFunc"></el-button>
            </el-tooltip>
	      </div>
	    </div>
		<div class="search_form commonSearch" v-show="showOrHidden" style="border-top: none;border-bottom: none;justify-content: start;padding-left: 5px">
			<div label v-for="(item,index) in selectObj.slice(3,20)" :key="index" >
				<!-- 根据需要显示的输入框类型进行动态显示 -->
				<el-input size="mini"  :placeholder="item.name" @input="searchData[item.modelName] = verifyfilter(item.verifyTpye, searchData[item.modelName])"  v-if="item.type =='inputVerify'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
				<el-input  size="mini"  :placeholder="item.name"  v-if="item.type =='input'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
				<el-select  size="mini"  :placeholder="item.name" v-if="item.type =='select'" v-model="searchData[item.modelName]"  clearable filterable style="width:150px"  @keyup.enter.native="searchHandler">
					<el-option size="mini"  v-for="opt in item.selectData" :key="opt.dictValue" :label="opt.dictLabel" :value="opt.dictValue"></el-option>
				</el-select>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	  name: 'headerSearch',
	  data() {
	    return {
			   	searchData: {},
	      showOrHidden: false
	    }
	  },
	  props: {
		   // 搜索框集合
    selectObj: {
           	  type: Array,
           	  default: []
    },
    // 是否显示新增按钮
    isShowAdd: {
           	  type: Boolean
    },
    // 是否显示审核按钮
    isShowAud: {
           	  type: Boolean
    },
    // 是否显示油价协力费率关系按钮
    isShowOilPrice: {
           	  type: Boolean
    },
    // 查询按钮事件
    goSearchFc: {
           	  type: Function
    },
    // 新增按钮事件回传
    addFun: {
           	  type: Function
    },
    // 审核按钮事件回传
    auditFun: {
           	  type: Function
    },
    // 油价协力费率关系事件回传
    oilPriceFun: {
           	  type: Function
    }
	  },
	  activated() {
	    // alert(this.$store.state.app.searchResouce)
		  if (this.$store.state.app.searchResouce == 'menu') {
	      this.searchData = {}
		   }
	  },
	  methods: {
	    // 查询按钮事件
	    searchHandler() {
			   this.goSearchFc(this.searchData);
	    },
	    // 新增按钮事件回传
	    addFunc() {
      this.addFun();
	    },
	    // 审核按钮事件回传
	    auditFunc() {
      this.auditFun();
	    },
	    // 油价协力费率关系事件回传
	    oilPriceFunc() {
      this.oilPriceFun();
	    }
	
	  }

}
</script>
<style lang="less" scoped>
@import "../../../assets/searchfrom.less";

.selectBox {
	justify-content: space-between;
	display: flex;
	background: #F5F7FA;
	border: 1px solid #e1e4eb;
	border-left: none;
	line-height: 28px;
	height: 37px;
	padding-top: 8px;
	padding-left: 14px;
	padding-right: 20px;
	border-bottom-width: 0;
	border-right-width: 0;
	border-radius: 4px 4px 0 0;
}
</style>
